<script setup>

import {ref, onMounted} from "vue";
import {delete_Category, detail_Category, getList_Category, update_Category} from "@/api/category";
import {ElMessage} from "element-plus";

const categoryData = ref([])
const initData = async () => {
  const res = await getList_Category()
  if (res.code === 200) {
    categoryData.value = res.data
  }
}
onMounted(() => {
  initData()
})
const form = ref({})
const openEdit = ref(false)
const Edit = async (row) => {
  openEdit.value = true
  const res = await detail_Category(row.id)
  form.value = res.data

}
const deleteData = async (row) => {
  console.log(row.id)
  const res = await delete_Category(row.id)
  if (res.code === 200) {
    ElMessage.success('删除成功');
    initData()
  } else {
    ElMessage.error(res.message)
  }

}
const update = async () => {
  const res = await update_Category(form.value)
  if (res.code === 200) {
    ElMessage.success('修改成功');
    openEdit.value = false
    initData()
  } else {
    ElMessage.error(res.message)
  }
}
</script>

<template>
  <el-table :data="categoryData">
    <el-table-column prop="name" label="分类名称" align="center"/>
    <el-table-column prop="description" label="分类描述" align="center"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="Edit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="deleteData(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  查询进行回调-->
  <el-dialog v-model="openEdit">
    <el-form>
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="详细描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="update" type="primary">确认修改</el-button>
      <el-button @click="openEdit=fasle" type="primary">取消</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
